<template>
	<view>
		<view class="tabbar">
			<view class="iconfont" @click="backto">&#xe616;</view>
			<view></view>
		</view>

		<view class="money">
			<view class="title">账户总额（元）</view>
			<view class="commission">{{userinfo.money}}</view>
			<view class="detailed" @click="navgoto('/pages/cash/cashlist?type=1')">
				<view>查看明细</view>
				<view class="iconfont fontcolor">&#xe616;</view>
			</view>
			<view class="empty-box"></view>
			<view class="control">
				<view class="button" @click="show_recharge=true">充值</view>
				<view class="button cash" @click="navgoto('/pages/cash/cash')">提现</view>
			</view>
			<view class="bottom">
				<view class="help" @click="navgoto('/pages/member/problem')">帮助中心</view>
				<view class="baozhan">平台安全保障中</view>
			</view>

			<view class="recharge" :class="[show_recharge?'visible':'hidden']">
				<swiper class="swiper-box" :current="tabIndex">
					<swiper-item class="swiper-item">
						<view class="flag">
							<view>充值中心</view>
							<view class="iconfont" @click="show_recharge=false">&#xe631;</view>
						</view>
						<view class="price">
							<view v-for="(item,index) in rechargeBalance" :key="index">
								<input @blur="price" v-if="item==0" type="digit" class="price-item" style="text-align: center;font-weight: bold;width: 160rpx; font-size: 25rpx;font-weight: normal; padding:0 20rpx;"
								 placeholder-style="color:#9e9e9e" placeholder="请输入金额" @click="moneyIndex=index" />
								<view :class="['price-item',index==moneyIndex? 'checkmoney':'']" v-else @click="moneyIndex=index">{{item}}元</view>
							</view>
						</view>
						<view class="continues" @click="tabIndex=1">下一步</view>
					</swiper-item>
					<swiper-item class="swiper-item">
						<view class="flag">
							<view class="backpage" @click="tabIndex=0">
								<view class="iconfont">&#xe616;</view>
								<view>付款方式</view>
							</view>
							<view class="iconfont" @click="show_recharge=false">&#xe631;</view>
						</view>
						<view class="pay-type">
							<radio-group name="paytype" style="width: 100%;" @change="redio_choice">
								<view class="pay-box">
									<view class="left">
										<image src="/static/image/wechat_logo.png"></image>
										<view>微信</view>
									</view>
									<view class="right">
										<radio value="wxpay" checked="true" style="transform: scale(0.8);"></radio>
									</view>
								</view>
								<view class="pay-box">
									<view class="left">
										<image src="/static/image/zhifubao_logo.png"></image>
										<view>支付宝</view>
									</view>
									<view class="right">
										<radio value='alipay' style="transform: scale(0.8);"></radio>
									</view>
								</view>
							</radio-group>
						</view>
						<view class="continues" @click="recharge">立即付款</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="mask-bg" v-if="show_recharge" @click="show_recharge=false"></view>
		</view>
	</view>
</template>

<script>
	/**
	 * 充值入口
	 */
	export default {
		data() {
			return {
				userinfo:{
					money:0
				},
				rechargeprice: 0,
				moneyIndex: 0,
				rechargeBalance: [], //充值金额
				pay_type: 'wxpay', //充值平台
				tabIndex: 0,
				show_recharge: false, //显示充值组件
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			backto() {
				uni.navigateBack({
					delta: 1
				})
			},
			//输入金额
			price(e) {
				//console.log(e.target.value)
				this.rechargeprice = e.target.value
			},
			//选择支付平台
			redio_choice(e) {
				this.pay_type = e.target.value
			},
			init() {
				
				//获取充值金额
				this.$HttRequest({
					url: '/member/rechargeChoice',
					param: ''
				}).then((res) => {
					if (res.status === 10000) {
						this.getmember()
						this.rechargeBalance = res.data
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg)
				})
			},
			getmember(){
				this.userinfo = uni.getStorageSync('user_info');
				console.log(this.userinfo)
			},
			recharge() {
				//需要绑定手机号
				let userinfo = uni.getStorageSync('user_info')
				if(!userinfo.phone){
					this.$ShowMsg('请前往【设置中心】绑定手机号')
					return
				} 
				let rechargeparam = {
					money: this.rechargeBalance[this.moneyIndex],
					pay_type: this.pay_type
				}
				if (this.rechargeBalance[this.moneyIndex] == 0) {
					rechargeparam.money = this.rechargeprice
				}
				console.log(rechargeparam)
				//return
				let _this=this
				_this.$HttRequest({
					url: '/member/rechargeBalance',
					param: rechargeparam,
				},'POST',true).then((res) => {
					if (res.status === 10000) {
						//关闭充值窗口
						this.show_recharge = false
						uni.requestPayment({
						    provider: _this.pay_type,
						    orderInfo: res.data, //微信、支付宝订单数据
						    success: function (res) {
						        console.log(res);
								let newmoney = parseFloat(rechargeparam.money) + _this.userinfo.money
								_this.$changefield('money',newmoney.toFixed(2))
								_this.$ShowMsg('充值成功','success')
								_this.getmember()
						    },
						    fail: function (err) { 
								_this.$ShowMsg('充值失败','error')
						       //console.log('fail:' + JSON.stringify(err));
						    }
						})
					} else {
						_this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					_this.$ShowMsg('statusCode：' + error.errMsg)
				})
			},
			navgoto(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.mask-bg {
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		position: fixed;
		z-index: 1;
		background-color: rgba(#000, 0.5);
	}

	.tabbar {
		position: fixed;
		width: 90%;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		top: 80rpx;
		left: 40rpx;
		z-index: 88;

		.iconfont {

			font-size: 42rpx;
			color: #333;
			transform: rotate(180deg);
		}
	}

	.money {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 30rpx;
		color: #333;
		flex-direction: column;
		position: relative;

		.recharge {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			position: absolute;
			width: 100%;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			left: 0;
			bottom: 0;
			z-index: 66;
			background-color: #fff;
			// box-shadow: 10rpx 0 15rpx #e6e6e6;
			height: 450rpx;
			padding: 20rpx 0;
			transition: transform 0.2s;
			transition-timing-function: cubic-bezier(0.25, 0.85, 0.4, 0.65);

			.swiper-box {
				width: 90%;
				display: block;
				height: 450rpx;

				.swiper-item {
					width: 100%;
					font-size: 28rpx;
					color: #333;

					.continues {

						color: #fff;
						width: 50%;
						height: 80rpx;
						background-color: $uni-color-primary;
						border-radius: 40rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 30rpx auto;

					}

					.pay-type {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						flex-direction: column;

						.pay-box {
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: center;

							margin-bottom: 30rpx;

							.left {
								display: flex;
								justify-content: center;
								align-items: center;

								image {
									margin-right: 10rpx;
									width: 50rpx;
									height: 50rpx;
								}
							}

							.right {}
						}
					}

					.flag {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 100%;
						margin: 20rpx 0;
						margin-bottom: 50rpx;
						font-size: 35rpx;
						font-weight: bold;

						.iconfont {
							font-size: 28rpx;
							color: #333;
							margin-right: 20rpx;
						}

						.backpage {
							display: flex;
							justify-content: center;
							align-items: center;

							.iconfont {
								transform: rotate(180deg);
								font-size: 35rpx;
								color: #333;
								margin-right: 10rpx;
							}
						}
					}

					.price {
						display: flex;

						justify-content: flex-start;
						align-items: center;
						flex-wrap: wrap;
						width: 100%;

						.price-item {
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: #f5f5f5;
							color: #333;
							border-radius: 10rpx;
							font-size: 28rpx;
							font-weight: bold;
							width: 200rpx;
							height: 80rpx;
							margin-right: 25rpx;
							margin-bottom: 20rpx;
							font-weight: bold;
						}

						.checkmoney {
							color: #fff;
							background-color: $uni-color-primary;
						}
					}
				}
			}

		}

		.visible {
			transform: translateY(0);
		}

		.hidden {
			transform: translateY(500rpx);
		}

		.bottom {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			font-size: 28rpx;
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 30rpx;
			z-index: 33;

			.help {
				color: #1d3b65;
				margin-bottom: 10rpx;
			}

			.baozhan {
				color: #e0e0e0;
			}
		}

		.empty-box {
			height: 180rpx;
		}

		.control {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.button {
				font-weight: bold;
				color: #fff;
				margin: 20rpx 0;
				width: 400rpx;
				height: 90rpx;
				border-radius: 10rpx;
				background-color: $uni-color-primary;
				font-size: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.cash {
				color: $uni-color-primary;
				background-color: #ebebeb;
			}
		}

		.title {
			margin-top: 300rpx;
		}

		.commission {
			font-size: 80rpx;
			margin: 30rpx 0;
			font-weight: bold;
		}

		.detailed {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #9e9e9e;

			.fontcolor {
				color: #e6e6e6;
			}
		}
	}
</style>
